<template>
  <div class="sdtmanageBox">
    <div class="topTitle">
      <el-row>
        <el-col :span="4" style="padding-top: 10px;">学员管理</el-col>
        <el-col :span="6" :offset="14" class>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addStudent">添加学员</el-button>
          <el-button type="primary" size="small" icon="el-icon-download">批量导入</el-button>
          <el-button type="primary" size="small" icon="el-icon-upload2">导出学员</el-button>
        </el-col>
      </el-row>
    </div>
    <el-radio-group v-model="navTab" style="margin:20px 0;" @change="navTabChange">
      <el-radio-button label="official">正式学员</el-radio-button>
      <el-radio-button label="join">加入记录</el-radio-button>
      <el-radio-button label="exit">退出记录</el-radio-button>
    </el-radio-group>
    <div style="margin-bottom:20px;">
      <el-input v-model="keyWord" placeholder="请输入用户名/邮箱/手机号" style="width: 300px;"/>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
    </div>
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      border
      style="width: 100%"
    >
      <el-table-column prop="name" label="学员名称" align="center"/>
      <el-table-column v-if="navTab=='official'" prop="progress" label="学习进度" align="center"/>
      <el-table-column v-if="navTab=='official'" prop="joinTime" label="加入时间" align="center"/>
      <el-table-column v-if="navTab=='official'" prop="validity" label="学习有效期" align="center"/>
      <el-table-column v-if="navTab=='official'" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text">查看</el-button>
        </template>
      </el-table-column>

      <el-table-column v-if="navTab=='join'" prop="joinDay" label="加入日期" align="center"/>
      <el-table-column v-if="navTab=='join'" prop="joinType" label="加入类型" align="center"/>
      <el-table-column v-if="navTab=='join'" prop="joinCause" label="加入原因" align="center"/>
      <el-table-column v-if="navTab=='join'" prop="whetherPay" label="是否付费" align="center"/>

      <el-table-column v-if="navTab=='exit'" prop="exitDay" label="退出日期" align="center"/>
      <el-table-column v-if="navTab=='exit'" prop="exitType" label="退出类型" align="center"/>
      <el-table-column v-if="navTab=='exit'" prop="exitCause" label="退出原因" align="center"/>
      <el-table-column v-if="navTab=='exit'" prop="whetherRefund" label="是否退款" align="center"/>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin:20px 0;">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        :total="tableData.length"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <el-dialog :visible.sync="addStudentdialog" title="添加学员" width="30%">
      <el-form
        ref="studentInfoForm"
        :model="studentInfoForm"
        :rules="studentInfoRules"
        label-width="100px"
      >
        <el-form-item label="学员" prop="student">
          <el-input v-model="studentInfoForm.student" placeholder="邮箱/手机/用户名" style="width:300px;"/>
          <div class="inputInfo_hint">只能添加系统中已注册的用户</div>
        </el-form-item>
        <el-form-item label="购买价格" prop="price">
          <el-input v-model="studentInfoForm.price" placeholder="请输入购买价格" style="width:300px;">
            <template slot="append">元</template>
          </el-input>
          <div class="inputInfo_hint">本课程的价格为0.00元</div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="studentInfoForm.remark" style="width:300px;"/>
          <div class="inputInfo_hint">选填</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addStudentConfirm">确 定</el-button>
        <el-button @click="addStudentCancle">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navTab: 'official',
      keyWord: '  ',
      tableData:
        [
          {
            name: '杰克',
            progress: '60%',
            joinTime: '2019-06-03 19:30',
            validity: '3个月',

            joinDay: '2019-06-03 19:30',
            joinType: '自愿加入',
            joinCause: '喜欢',
            whetherPay: '否',

            exitDay: '2019-06-03 19:30',
            exitType: '主动退出',
            exitCause: '个人原因',
            whetherRefund: '是'
          }
        ],
      currentPage: 1,
      pageSize: 5,
      addStudentdialog: false,
      studentInfoForm: {
        student: '',
        price: '',
        remark: ''
      },
      studentInfoRules: {
        student: [{ required: true, message: '请添加学员', targger: blur }],
        price: [{ required: true, message: '请输入价格', targger: blur }]

      }
    }
  },
  methods: {
    navTabChange() {
      // 发请求调数据相应表格
      // this.$http.get('url' + 'id')
    },
    // 分页设置
    handleCurrentChange(arg) {
      this.currentPage = arg
    },
    handleSizeChange(arg) {
      this.pageSize = arg
    },
    // 添加学员
    addStudent() {
      this.addStudentdialog = true
    },
    addStudentConfirm() {
      this.$refs.studentInfoForm.validate((valid) => {
        if (valid) {
          this.addStudentdialog = false
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        } else {
          return false
        }
      })
    },
    addStudentCancle() {
      this.$refs.studentInfoForm.resetFields()
      this.addStudentdialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.sdtmanageBox {
  padding: 10px;
  .topTitle {
    font-size: 16px;
    // margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  .inputInfo_hint {
    margin-top: -5px;
    color: #a1a1a1;
  }
}
</style>
